<template>
	<view class="container">
		<view class="status_bar"></view>
		<view class="head flex-row">
			<view class="left" @click="goBack"><uni-icons type="arrowleft" size="24" color="#333"></uni-icons></view>
			<view class="center">员工奖惩</view>
			<view class="right" @click="toggleSearch">
				<view v-if="isShowSearch">
					<uni-icons type="arrowup" size="20" color="#999"></uni-icons>
					<text>收起</text>
				</view>
				<view v-else>
					<uni-icons type="arrowdown" size="20" color="#999"></uni-icons>
					<text>展开</text>
				</view>
			</view>
		</view>
		<view class="body">
			<view class="search" v-if="isShowSearch">
				<view class="item flex-row">
					<picker @change="changeConpany" :value="companyIndex" :range="companies" range-key="name">
						<view class="uni-input">{{ companies[companyIndex] ? companies[companyIndex].name : '' }}</view>
					</picker>
					<uni-icons type="arrowdown" size="20" color="#666"></uni-icons>
				</view>
				<view class="item flex-row">
					<picker @change="changeMonth" :value="month" :range="months" mode="multiSelector">
						<button type="primary" class="flex-row">
							<text>{{ monthTxt }}</text>
							<uni-icons type="arrowdown" size="18" color="#fff"></uni-icons>
						</button>
					</picker>
					<input type="text" v-model="username" placeholder="人员名称" />
					<button @click="searchData" type="primary">查询</button>
				</view>
			</view>
			<scroll-view v-if="list.length" @scrolltolower="getNextPageData" scroll-y="true" class="scroll" :class="{full: !isShowSearch}">
				<view class="card" v-for="(item, index) in list" :key="index">
					<view @click="toggleDetail(index)" class="title flex-row">
						<view class="name flex-row">
							<view class="label">姓名:</view>
							<scroll-view scroll-x="true"><block class="txt">{{ item.name }}</block></scroll-view>
						</view>
						<view class="money">总奖惩:<text class="success">{{ item.all_ward || 0 }}</text>元</view>
						<uni-icons type="arrowdown" size="18"></uni-icons>
					</view>
					<view class="detail" v-show="show[index]">
						<view class="flex-row">
							<text>巡检(任务/完成):{{ item.miss || 0 }}/<text class="success">{{ item.done_miss || 0 }}</text></text>
							<text>巡检奖惩:<text class="success">{{ item.xunjian_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>发现一般隐患数:{{ item.find_danger || 0 }}</text>
							<text>发现一般隐患奖励:<text class="success">{{ item.findDanger_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>发现重大隐患数:{{ item.find_big_danger || 0 }}</text>
							<text>发现重大隐患奖励:<text class="success">{{ item.findBigDanger_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>整改已验收数:{{ item.check_num || 0 }}</text>
							<text>整改已验奖惩:<text class="success">{{ item.check_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>按时整改数:{{ item.done_intime || 0 }}</text>
							<text>按时整改奖惩:<text class="success">{{ item.doneIntime_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>超期未整改数:{{ item.done_outtime || 0 }}</text>
							<text>超期未整改奖惩:<text class="success">{{ item.doneOuttime_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>往期超期未整改数:{{ item.doneIntime_ward || 0 }}</text>
							<text>往期超期未整改奖惩:<text class="success">{{ item.doneIntime_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>安全培训奖励数:{{ item.study || 0 }}</text>
							<text>安全培训奖励:<text class="success">{{ item.study_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>考试奖励数:{{ item.exam || 0 }}</text>
							<text>考试奖励:<text class="success">{{ item.exam_ward || 0 }}</text>元</text>
						</view>
						<view class="flex-row">
							<text>视频宣讲奖励数:{{ item.video || 0 }}</text>
							<text>视频宣讲奖励:<text class="success">{{ item.video_ward || 0 }}</text>元</text>
						</view>
					</view>
				</view>
				<view class="nodata">没有更多了~</view>
			</scroll-view>
			<view v-else class="nodata">没有更多了~</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import { getRandArray, date } from '../../../common/function.js';
const YEAR_LENGTH = 4;	// 连续显示的年份数量,5年
export default{
	components: { uniIcons },
	data(){
		return {
			isShowSearch: true,
			page: 1,
			total: 1,
			companies: [],
			companyIndex: 0,
			username: '',
			month: [1, 0],
			monthTxt: '',
			monthSearch: '',
			months: [
				['去年', '今年'],
				['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','一季','二季','三季','四季','全年']
			],
			list: [],
			show: [],
			userId: uni.getStorageSync('userid')
		}
	},
	onLoad(){
		this.setDefaultDate();
		this.doCompanyList();
	},
	methods: {
		goBack(){
			uni.navigateBack();
		},
		// 切换详情
		toggleDetail(index){
			this.show.splice(index, 1, !this.show[index]);
		},
		// 切换搜索条件
		toggleSearch(){
			this.isShowSearch = !this.isShowSearch;
		},
		// 选择公司
		changeConpany(e){
			this.companyIndex = e.detail.value;
		},
		// 设置初始化日期
		setDefaultDate(){
			let currMonth = date(false).month;
			this.month = [1, currMonth - 1];
			this.monthTxt = `今年${currMonth}月`;
			this.monthSearch = `m_${date(false).year}${currMonth < 9 ? '0'+currMonth : currMonth}`;
		},
		// 选择日期
		changeMonth(e){
			let [selectedYearIndex, selectedMonthIndex] = e.detail.value;
			this.monthTxt = this.months[0][selectedYearIndex] + this.months[1][selectedMonthIndex];
			
			// 判断年份的选择
			let selectedYear = new Date().getFullYear();
			if(selectedYearIndex == 0) selectedYear--;
			
			// 判断月份选择的区间
			if(selectedMonthIndex < 9){
				this.monthSearch = `m_${selectedYear}0${selectedMonthIndex+1}`;
			}else if(selectedMonthIndex >= 9 && selectedMonthIndex <= 11){
				this.monthSearch = `m_${selectedYear}${selectedMonthIndex+1}`;
			}else if(selectedMonthIndex > 11 && selectedMonthIndex <= 15){
				this.monthSearch = `q_${selectedYear}${selectedMonthIndex - 11}`;
			}else{
				this.monthSearch = `year_${selectedYear}`;
			}
			
			this.searchData();
		},
		// 处理公司列表
		doCompanyList(){
			let _this = this;
			let companyId = uni.getStorageSync('company');
			uni.request({
				url: _this.$API.getCompanyName,
				data: { company: companyId },
				header: _this.$API.get_head(),
				success: (res)=>{
					_this.companies = [{id: companyId, name: res.data.data.companyName}];
					_this.getList();
				}
			})
		},
		// 获取列表
		getList(){
			let _this = this;
			uni.request({
				url: _this.$API.gridEmployeeRewardList,
				data: {
					useid: _this.userId,
					company: _this.companies[_this.companyIndex].id,
					name: _this.username,
					yearmonth: _this.monthSearch
				},
				header: _this.$API.get_head(),
				success: (res)=>{
					let data = res.data.data;
					
					// 生产show
					_this.show = [];
					for(let i=0,l=data.length; i<l; i++){
						_this.show.push(false);
					}
					
					// 判断是第一页还是后续页
					if(_this.page == 1){
						_this.list = data;
					}else{
						_this.list = _this.list.concat(data);
					}
				}
			})
		},
		// 分页加载
		getNextPageData(){
			this.page++;
			if(this.page < this.total){
				this.list();
			}
		},
		
		// 查询
		searchData(){
			this.page = 1;
			this.getList();
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
}
.status_bar{
	width: 100%;
	height: var(--status-bar-height);
	background: #fff;
}
.body{
	height: calc(100vh - var(--status-bar-height) - 88upx);
	background: #F0F0F0;
	padding: 20upx 20upx 0;
	box-sizing: border-box;
}

.scroll{
	height: calc(100% - 192upx);
}
.scroll.full{
	height: 100%;
}
.success{
	color: #63CF49;
}
.card{
	background: #fff;
	margin-bottom: 16upx;
	border-radius: 8upx;
	padding: 14upx 20upx 6upx;
	box-shadow: 0 2upx 4upx #DEDEDE;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	font-size: 28upx;
}
.card .title view.name{
	width: 60%;
	height: 50upx;
	justify-content: flex-start;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 6upx;
	height: 26upx;
	background: #6393F8;
	border-radius: 6upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .title view.name .label{
	width: 100upx;
	text-indent: 30upx;
}
.card .title view.name scroll-view{
	width: calc(100% - 100upx);
	height: 50upx;
	overflow-x: auto;
}
.card .title view.name scroll-view .txt{
	width: 600upx;
	overflow-x: auto;
	white-space: nowrap;
}
.card .detail view{
	line-height: 1.6;
}

.search .item{
	height: 80upx;
	line-height: 80upx;
	background: #fff;
	border-radius: 10upx;
	margin-bottom: 16upx;
	padding: 0 12upx;
}
.search .item .label{
	width: 180upx;
	color: #797979;
	text-indent: 10upx;
}
.search .item .row{
	width: 50%;
}
.search .item:first-child picker{
	width: 85%;
}
.search .item input{
	color: #A3A3A3;
	font-size: 28upx;
	text-align: center;
	background: #F0F0F0;
	border-radius: 10upx;
	border: 2upx solid #509EC5;
	width: calc(100% - 350upx);
	height: 56upx;
}
.search .item button{
	font-size: 26upx;
	width: 140upx;
	height: 56upx;
	line-height: 56upx;
	margin: 0;
	background-color: #1692DC;
}
.search .item:last-child picker button{
	width: 170upx;
	padding: 0 12upx;
}
.search .item button:last-child{
	width: 140upx;
}
</style>
